<template>
  <div>
    <div>
      <el-dialog
        title="处理问题"
        :visible.sync="dialogVisible"
        width="50%"
        >
        <div>
          <el-form ref="form" status-icon label-width="auto"  style="padding-left: 10px;padding-right: 10px;">
            <el-form-item label=" 处理内容：">
              <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 20}" v-model="data"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false;data=''" style="margin-top: 40px;">取 消</el-button>
          <el-button type="primary" @click="chooseSure">确 定</el-button>
        </span>
      </el-dialog>

      <el-table :data="tableData"  border stripe='true'>

      	<el-table-column prop="id" label="编号" align="center"></el-table-column>

      	<el-table-column prop="content" label="内容" show-overflow-tooltip="true"  align="center"></el-table-column>

      	<el-table-column prop="type" label="类型"  align="center" ></el-table-column>

      	<el-table-column prop="allotTime" label="指派时间" align="center"></el-table-column>

        <el-table-column prop="handler" label="操作" align="center" width="280px;">
        	<template slot-scope="scope">
        		<el-button size="mini" type='primary' @click='dell(scope.$index, scope.row)'>处理</el-button>
        	</template>
        </el-table-column>
      </el-table>
      <el-pagination
            style="margin-top: 20px;"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            :page-size="pageSize"
            background='true'
            layout="total, prev, pager, next"
            :total="totleSize">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'service2',
    data() {
      return {
        tableData:[{

        }],
        dialogVisible:false,
        userList:[],
        chooseuser:"",
        id:'',
        data:"",
        pageSize:5,
        currentPage1:1,
        totleSize:0,
      };
    },
    components: {

    },
    mounted() {

    },
    beforeDestroy() {

    },
    computed:{

    },
    methods: {
      getdata() {
        this.getRequest('/service/getStateList?state=已分配&beginPage='+this.currentPage1+'&pageSize='+this.pageSize)
        .then(successResponse => {
          if (successResponse.data.status == 200) {
            this.tableData=successResponse.data.obj;
            this.totleSize=successResponse.data.totleSize;
          }
          else
            this.$message.error(successResponse.data.msg);
        })
        .catch(failResponse => {
          this.$message.error('网络不通畅');
        })
      },
      handleCurrentChange(val) {
        this.getdata()
      },
      dell(index, row){
        this.dialogVisible=true;
        this.id=row.id;
      },
      chooseSure(){
        if(!this.data){
          this.$message.error("处理内容 不能为空！");
          return;
        }
        this.dialogVisible = false;
        this.postRequest('/service/dell',{
          dell:this.data,
          dellUser:this.$store.state.userInfo.name,
          id:this.id
        })
        .then(successResponse => {
          if (successResponse.data.status == 200) {
            this.$message.success("处理完成！");
            this.getdata();
          }
          else
            this.$message.error(successResponse.data.msg);
        })
        .catch(failResponse => {
          this.$message.error('网络不通畅');
        })
      }
    },
  };
</script>

<style>

</style>
